@import "layout";

@function toRem($num){
	@return $num/16+rem;
}
@mixin transition($val,$type) {
	@if $type == 1 {
		-o-transition:-o-+$val;
		-ms-transition:-ms-+$val;
		-moz-transition:-moz-+$val;
		-webkit-transition:-webkit-+$val;
	  	transition:$val;
	} @else {
		-o-transition:$val;
		-ms-transition:$val;
		-moz-transition:$val;
		-webkit-transition:$val;
	  	transition:$val;
	}
}

@mixin transform($val) {
	-o-transform:$val;
	-ms-transform:$val;
	-moz-transform:$val;
	-webkit-transform:$val;
	transform:$val;
}

$winW-list: 360,400,440,480,520,560,600,640;
@each $item in $winW-list {
  @media only screen and (min-width:#{$item}px) {
    html {font-size:#{$item/20}px !important;}
  }
}

body,html{
	margin:0;
	padding:0;
	height:100%;
	overflow:hidden;
}

.ub{
	display:flex; 
}
.flex1{
	flex:1; 
}

.align-items-center{
	align-items:center;  
}



.content{
	
	padding-top:toRem(15);
	height:toRem(45);
	text-align:center;
	.menu-btn{
		width:1px;
		color:#9a9db0;
		.iconfont{
			display:block;
			font-size:toRem(40);
			line-height:toRem(40);
			
			
		}
		.text{
			font-size:toRem(12);
			font-weight:bold;
			
		}
	}
}

.hr{
	padding:5px;
	border-bottom:15px solid #f9f9f9;
	}

.hr1{

	border-bottom:15px solid #f9f9f9;
	}





.item-row{
	padding:0 toRem(5) 0 0;
	border-bottom:1px solid #f9f9f9;
	&:active{
		background:#fcfcfc;
	}
	.head-box{
		width:toRem(45);
		height:toRem(30);
		margin:toRem(10) toRem(10);
		overflow:hidden;
		.iconfont{
			display:block;
			font-size:toRem(30);
			line-height:toRem(30);
		}
	}
	.user-name{
		margin:0;
		font-size:toRem(12);
	}
	.time{
		font-size:toRem(12);
		color:#999;
	}
	.info{
		margin:toRem(5) 0 0;
		font-size:toRem(10);
		color:#9f9f9f;
	}
	
}



.header{
	height:toRem(42);
	background:#11b7f3;
}

.header-row{
	
	padding:0 toRem(2) 0 0;
	.head-box{
		width:toRem(38);
		height:toRem(38);
		margin:toRem(2) toRem(10);
		overflow:hidden;
		border-radius:100%;
		img{	
			width:100%;

		}
		
	}
	color:#ffffff;
	font-size:toRem(16);
	
}




.footer{
	height:toRem(42);
	border-top:1px solid #eee;
	text-align:center;
	.menu-btn{
		width:1px;
		color:#9a9db0;
		&.active{
			color:#02b5f8;
		}
		.iconfont{
			display:block;
			font-size:toRem(20);
			line-height:toRem(20);
		}
		.text{
			font-size:toRem(10);
		}
	}
}
.allWrap {
	height:100%;
}
.main{
	height:1px;
	overflow:auto;
}

.all-all-wrap{
	height:100%;
	position:relative;

	@include transition(transform 0.5s,1);
	&.open{
		@include transform(translateX(69%));
	}
	.sider{
		position: absolute;
	    height: 100%;
	    width: 70%;
	    background: blue;
	    z-index: 5;
	    left: -70%;
	}
}

.dropMenu-box{
	z-index:-1;
	position:absolute;
	height: 100%;
    width: 100%;
	&.open{
		z-index:1;
		.bg{
			background: rgba(0,0,0,0.1);
		}
		.dropMenu{
			transform: scale(1);
		}
	}
	.bg{
	    position: absolute;
	    left: 0;
	    top: 0;
	    height: 100%;
	    width: 100%;
	    z-index: 50;
	    background: rgba(0,0,0,0);
	    transition: background 0.4s;
	}
	.dropMenu{
		position: absolute;
	    right: 0.5rem;
	    top: 2.6rem;
	    height: 8rem;
	    width: 5rem;
	    z-index: 51;
	    transition: transform 0.4s;
	    background: #fff;
	    border-radius: 5px;
	    box-shadow: 0 0 15px rgba(0,0,0,0.5);
	    transform: scale(0);
	    transform-origin: 100% 0;
	   
	}
}
